<template>
  <div class="my">
    <!-- 标题 -->
    <div class="title">
      <h3>我的</h3>
    </div>

    <div class="user">
      <div class="middle">
        <div class="head-img"><img src="@/assets/我的.png" /></div>
        <p class="user-name" v-if="isLog">{{ userName }}</p>
        <p class="signature" v-if="isLog">这个人很懒，什么也没留下</p>
        <!-- 登录按钮 -->
        <div class="btn" v-if="!isLog">
          <button><router-link to="/homes/my/login">登录</router-link></button>
        </div>
      </div>
    </div>
    <router-view @item-msg="itemMsg" :xinxi="xinxi" v-if="!isLog"></router-view>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      isLog: false,
      xinxi: [],
      userName: "",
    };
  },

  methods: {
    itemMsg(obj) {
      this.xinxi.push(obj);
    },
  },
  watch: {
    $route: {
      handler(newValue, oldValue) {
        // console.log(newValue);
        if (newValue.params.userName) {
          this.isLog = true;
          this.userName = newValue.params.userName;
          //   console.log(11111);
          this.$emit("item-login", this.isLog);
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.my {
  //   padding: $p;
  .title {
    height: 14.3733vw;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding: 5vw;
    h3 {
      height: 100%;
      font-size: 4.2667vw;
    }
  }
  .user {
    width: 100%;
    height: 70vw;
    border: 1px solid $bgc;
    position: relative;
    .middle {
      width: 70%;
      margin: 0 auto;
      .head-img {
        width: 24vw;
        height: 24vw;
        overflow: hidden;
        border-radius: calc(24vw / 2);
        border: 1.5vw solid $bgc;
        margin: 12vw auto 5vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        text-align: center;
        margin: 2vw 0;
      }
      .signature {
        font-size: 3.7333vw;
      }
      .btn {
        margin: 0 auto;
        width: 20vw;
        height: 10vw;
        button {
          width: 100%;
          height: 100%;
          border-radius: 10vw;
          background-color: $bgc;
          border: 0;
          a {
            color: #fff;
          }
        }
      }
    }
  }
  .user::after {
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: -1;
    position: absolute;

    background-color: $bgc;

    top: 0;
    left: 0;
  }
}
</style>